<template>
  <div class="order">
    <a-card title="收藏列表" style="width: 100%">
      <!-- <div slot="extra">
        <a-input-search placeholder="请输入京东商品id进行查询" style="width: 250px" v-model="searchipt" @search="onSearch" />
      </div> -->
      <div class="goods_table">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.id"
          :dataSource="goodsList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="goods_short_name" slot-scope="row">
            <div>
              <p>{{ row.goods_short_name }}</p>
              <p>{{ row.shop_name }}</p>
              <p class="display">
                <span>商品类型:</span>
                <span class="typespan">{{
                  row.goods_type == 1 ? '京东自营' : row.goods_type == 2 ? '拼购' : 'pop'
                }}</span>
              </p>
            </div>
          </div>
          <div slot="goods_img" slot-scope="goods_img">
            <img :src="goods_img" style="width:120px;" />
          </div>
          <div slot="goods_xj_img" slot-scope="row">
            <img
              v-for="(item, index) in row.srcList"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item"
            />
          </div>
          <div slot="goods_copywriting" slot-scope="goods_copywriting">
            <div class="copy">
              {{ goods_copywriting }}
            </div>
          </div>
          <div slot="goods_num" slot-scope="row">
            <div style="text-align:left;">
              <p>2小时销量:{{ row.goods_today_xl }}</p>
              <p>今日销量:{{ row.today_coupon_num }}</p>
              <p>月销量:{{ row.month_goods_num }}</p>
            </div>
          </div>
          <span slot="coupon" slot-scope="row">
            <a :href="row.coupon_url" target="_blank" rel="noopener noreferrer" class="coupon_a">
              <span>劵</span><em>￥{{ row.coupon_discount }}</em>
            </a>
            <div style="margin-top:8px">
              <div>
                <span>领取数量:</span><em>{{ row.coupon_lq_num }}</em>
              </div>
            </div>
          </span>
          <div slot="create_at" slot-scope="row">
            <div>{{ row.create_at }}</div>
          </div>
          <div slot="goods_price" slot-scope="row">
            <span style="color:orange">¥{{ row.goods_after_price }}</span>
            /
            <span>¥{{ row.goods_price }}</span>
          </div>
          <div slot="commission_bl" slot-scope="row">
            <span style="color:orange">{{ row.commission_bl }}%</span>
          </div>
          <div slot="active" slot-scope="row">
            <a-popconfirm
              title="确认删除吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="dodel(row.id)"
            >
              <span class="goodsurl">删</span>
            </a-popconfirm>
          </div>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getCollectionList, delCollection } from '@/api/collection'
import Moment from 'moment'

export default {
  name: 'Order',
  data () {
    return {
      searchipt: '',
      visible: false,
      confirmLoading: false,
      count: 0,
      columns: [
        {
          title: 'ID',
          width: 150,
          align: 'center',
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'id'
          }
        },
        {
          title: '商品名称',
           width: 250,
          align: 'center',
          //   dataIndex: 'goods_short_name',
          scopedSlots: {
            customRender: 'goods_short_name'
          }
        },
        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'goods_img',
          scopedSlots: {
            customRender: 'goods_img'
          }
        },
        {
          title: '商品营销图',
          align: 'center',
          scopedSlots: {
            customRender: 'goods_xj_img'
          }
        },
        {
          title: '文案',
          align: 'center',
          width: 400,
          // dataIndex: 'goods_copywriting',
          scopedSlots: {
            customRender: 'goods_copywriting'
          }
        },
        {
          title: '销量',
          align: 'center',
          scopedSlots: {
            customRender: 'goods_num'
          }
        },
        {
          title: '优惠/原价',
          align: 'center',
          scopedSlots: {
            customRender: 'goods_price'
          }
        },
        {
          title: '佣金比例',
          align: 'center',
          // dataIndex: 'commission_bl',
          scopedSlots: {
            customRender: 'commission_bl'
          }
        },
        {
          title: '优惠劵',
          align: 'center',
          // dataIndex: 'status',
          scopedSlots: {
            customRender: 'coupon'
          }
        },
        {
          title: '上单团队',
          align: 'center',
          dataIndex: 'team_name',
          scopedSlots: {
            customRender: 'team_name'
          }
        },
        {
          title: '收藏时间',
          align: 'center',
          // dataIndex: 'create_at',
          scopedSlots: {
            customRender: 'create_at'
          }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: {
            customRender: 'active'
          }
        }
      ],
      pagination: {
        pageSize: 15,
        page: 1
      },
      loading: false,
      goodsList: [
        {
          id: 24, // 商品表自增id
          item_id: '61671057944', // 商品id
          goods_img: '//img14.360buyimg.com/n1/jfs/t1/120669/36/5453/194790/5ef01e44Eb06b71ec/ca4f073639b54c7e.jpg', // 商品主图
          goods_short_name: '【奥克斯旗舰店】电火锅 家用多功能料理锅 5L', // 商品短名称
          goods_today_xl: 0, // 2小时销量
          today_coupon_num: 0, // 今日销量
          month_goods_num: 0, // 月销量
          goods_price: '119.00', // 原价
          goods_after_price: '99.00', // 卷后价
          commission_bl: '20', // 佣金比例
          coupon_discount: '20', // 优惠卷面值
          coupon_url:
            'https://coupon.m.jd.com/coupons/show.action?key=257213748bb5444bbfe6d1964e035c26&roleId=33902451&to=mall.jd.com/index-10096578.html', // 优惠卷链接
          coupon_lq_num: 0, // 优惠卷领取数量
          goods_type: 3, // 1=京东自营 2=拼购 3 pop
          shop_name: '奥克斯厨房电器旗舰店', // 店铺名称
          goods_xj_img: '', // 商品营销图
          goods_copywriting:
            '\n【京东旗舰店，品质保证】花样美食它来做，8大优势多功能电热锅立体循环加热，物理不粘锅，煎、炒、炖、煮、蒸、烤样样行。【赠送一年以换代修】\n【奥克斯旗舰店】电火锅 家用多功能料理锅 5L\n京东价：119元\n券后价：99元\n领券：http://coupon.m.jd.com/coupons/show.action?key=257213748bb5444bbfe6d1964e035c26&roleId=33902451&to=mall.jd.com/index-10096578.html\n抢购：http://item.jd.com/61671057944.html', // 商品文案
          create_at: '2020-07-16 15:01:11', // 收藏时间
          team_name: '1', // 上单团队
          srcList: [] // 营销图数组
        }
      ]
    }
  },

  computed: {},
  created () {
    this.getCollectionList(1, 15)
  },
  mounted () {},
  methods: {
    dodel (id) {
      delCollection({ goods_id: id })
        .then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getCollectionList(1, 15)
          } else {
              this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取收藏列表
    getCollectionList (page, pagesize) {
        this.loading = true
      getCollectionList({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code === 200) {
            console.log('收藏返回', res)
              this.count = res.data.count
            this.goodsList = res.data.data
            for (const i in this.goodsList) {
                if (this.goodsList[i].goods_xj_img !== '') {
                    this.goodsList[i].srcList = this.goodsList[i].goods_xj_img.split(',')
                    }
            }
            console.log(this.goodsList)
             const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.loading = true
      this.getCollectionList(params.page, 15)
    },
    // onSearch (value) {
    //   // console.log(value)
    //   this.getCollectionList(1, 15, this.searchipt)
    // },
    // 获取自己审核的商品列表
    getCollectionList2 (page, pagesize, goodsid) {
      this.loading = true

      getCollectionList({
        page: page,
        pagesize: parseInt(pagesize),
        goods_id: goodsid
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('商品列表返回', res)
            this.count = res.data.count
            this.goodsList = res.data.data
            for (let i = 0; i < this.goodsList.length; i++) {
              this.goodsList[i].goods_start_time = Moment(parseInt(this.goodsList[i].goods_start_time + '000')).format(
                'YYYY-MM-DD HH:mm:ss'
              )
              this.goodsList[i].goods_end_time = Moment(parseInt(this.goodsList[i].goods_end_time + '000')).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          } else {
            this.$message.info(res.msg)
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  display: flex;
  justify-content: center;
  align-items: center;
}

.goods_table {
  .typespan {
    display: inline-block;
    background-color: red;
    color: white;
    padding: 0 3px;
  }
  .copy {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }

  .coupon_a {
    display: block;
    font-size: 0;
    cursor: pointer;
    margin-top: 1px;

    span {
      display: inline-block;
      padding: 0 5px;
      background: #fd7100;
      color: #fff;
      font-size: 12px;
      background: linear-gradient(0deg, rgba(255, 75, 66, 1), rgba(255, 117, 60, 1));
      height: 20px;
      vertical-align: middle;
      line-height: 20px;
    }

    em {
      display: inline-block;
      padding: 0 8px;
      border: 1px solid #fd7100;
      color: #fd7100;
      font-size: 12px;
      height: 20px;
      vertical-align: middle;
      line-height: 18px;
    }
  }

  .goodsurl {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    margin-left: 10px;
    color: #000;
    font-size: 18px;
    // font-weight: bolder;
    text-align: center;
    border-radius: 50%;
    // padding: 5px;
    color: gray;
    cursor: pointer;
    border: 1px solid gray;
  }

  .ant-table-row:hover {
    .goodsurl {
      background-color: red;
      color: #fff;
      // font-weight: bolder;
      border: none;
    }

    .quan {
      background-color: orange;
    }
  }
}
</style>
